Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
|
There was a problem hiding this comment.
Pull request overview
This PR adds a global beta notice banner to the ObjectQL website to inform visitors that ObjectQL v2.0 is in beta. The implementation includes a new React component with responsive design and a call-to-action button.
Changes:
- Created a
BetaBannercomponent with gradient styling, beta symbol, and informational messaging - Integrated the banner into the root layout to display site-wide across all pages
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| apps/site/components/beta-banner.tsx | New component displaying beta status with gradient background, responsive text, and "Get Started" CTA linking to documentation |
| apps/site/app/layout.tsx | Imports and renders BetaBanner at the top of the body element, above the RootProvider |
| <div className="mx-auto max-w-7xl px-3 py-2 sm:px-6 lg:px-8"> | ||
| <div className="flex flex-wrap items-center justify-between gap-2"> | ||
| <div className="flex flex-1 items-center gap-2"> | ||
| <span className="flex h-6 w-6 items-center justify-center rounded-full bg-white/20 text-xs font-bold"> |
There was a problem hiding this comment.
The beta symbol (β) is decorative and should have aria-hidden="true" to prevent screen readers from announcing it. Screen readers would read this as "beta" which could be confusing since the text already states "Beta".
| <span className="flex h-6 w-6 items-center justify-center rounded-full bg-white/20 text-xs font-bold"> | |
| <span | |
| className="flex h-6 w-6 items-center justify-center rounded-full bg-white/20 text-xs font-bold" | |
| aria-hidden="true" | |
| > |
|
|
||
| export function BetaBanner() { | ||
| return ( | ||
| <div className="relative bg-gradient-to-r from-blue-600 to-cyan-500 text-white"> |
There was a problem hiding this comment.
This banner should use a semantic HTML element for better accessibility. Consider wrapping the content in a
element or adding role="banner" to the outermost div to help screen reader users understand the purpose of this component. Since this is a site-wide announcement banner, using semantic HTML will improve the page structure and accessibility.
Adds a global beta notice to inform visitors that ObjectQL v2.0 is in beta.
Changes
BetaBannercomponent with blue gradient design, beta symbol (β), and status messagingapp/layout.tsx) to display across all pages (home, docs, etc.)Screenshots
Homepage:
Documentation:
Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
fonts.googleapis.com/usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/objectql/objectql/node_modules/.pnpm/next@16.1.4_@babel+core@7.28.6_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/next/dist/server/lib/start-server.js(dns block)If you need me to access, download, or install something from one of these locations, you can either:
Original prompt
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.